<!-- 联系页面 -->
<template>
  <div class="w-full min-h-screen relative z-10 flex items-center">
    <div class="ml-[150px] md:ml-[50px] lg:ml-[150px] max-w-2xl">
      <h1 class="text-4xl lg:text-5xl mb-2 font-bold animate-fadeInUp animate-glow">
        <div class="text-2xl mb-4 text-white/80">(｡･∀･)ﾉﾞ</div>
        联系方式
      </h1>
      <div class="bg-black/20 backdrop-blur-md rounded-lg p-6 border border-white/10 animate-fadeInUp">
        <div class="space-y-6">
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:email" class="mr-2" />
              电子邮件
            </h2>
            <a href="mailto:contact@example.com" 
               class="text-white/80 hover:text-white transition-colors flex items-center group">
              <span class="break-all">contact@example.com</span>
              <Icon icon="mdi:open-in-new" 
                    class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity" />
            </a>
          </div>
          
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:github" class="mr-2" />
              GitHub
            </h2>
            <a href="https://github.com/yourusername" 
               target="_blank"
               rel="noopener noreferrer" 
               class="text-white/80 hover:text-white transition-colors flex items-center group">
              <span>github.com/yourusername</span>
              <Icon icon="mdi:open-in-new" 
                    class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity" />
            </a>
          </div>
          
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:message" class="mr-2" />
              反馈建议
            </h2>
            <p class="text-white/80 leading-relaxed">
              如果您有任何问题、建议或反馈，欢迎通过以上方式与我们联系。
              我们会在收到消息后尽快回复您。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script> 